<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            实时数据
            <ExclamationCircleOutlined />
          </div>
          <div class="titleLeft">
            <a-button
              class="search_Button confirm"
              :icon="h(SyncOutlined)"
              type="primary"
              @click="refreshData"
              >刷新数据</a-button
            >
          </div>
        </header>
        <a-row :gutter="16" class="marginTop12">
          <LeTodoList :todoItems="todoItems" @sendData="updateData" />
        </a-row>
      </template>
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            整体数据汇总
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template>
      <div class="seach-content">
        <a-row>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏ID</div>
            <a-input
              size="small"
              v-model:value="id"
              allowClear
              placeholder="请输入游戏ID"
              class="search_input"
            />
          </a-col>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏名称</div>
            <a-input
              size="small"
              v-model:value="name"
              allowClear
              type="text"
              placeholder="请输入游戏名称"
              class="search_input"
            />
          </a-col>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">日期选择</div>
            <!-- <a-time-range-picker class="search_input" allowClear> </a-time-range-picker> -->
            <a-range-picker v-model:value="dataTime" class="search_input" />
          </a-col>
          <a-col :xs="3" :xl="6" class="search_content">
            <a-button class="search_Button confirm" type="primary" @click="search"
              >确定</a-button
            >
            <a-button
              class="search_Button search_Button_reset button_cancel_hover"
              @click="reset"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="margin20 dataOverview">
        <a-row>
          <a-col flex="auto">
            <div class="a_col_date">
              <!-- <SvgIcon name="date" color="#4CC87E" width="21px" height="21px" /> -->
              <svg class="w21px h21px" aria-hidden="true">
                <use :xlink:href="`#svg-icon-date`" />
              </svg>
              <span>数据总览</span>
            </div>
          </a-col>
          <a-col flex="70px">
            <a-button
              size="middle"
              class="search_Button confirm"
              type="primary"
              :icon="h(ExportOutlined)"
              @click="exportDate"
              >导出数据</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :data-source="data"
          @resizeColumn="handleResizeColumn"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped1' : null)
          "
          :locale="localeObj"
        >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
              <span>
                <smile-outlined />
                Name
              </span>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.key === 'name'">
              <a>
                {{ record.name }}
              </a>
            </template> -->
            <div v-if="column.key === 'status'" class="geme_status">
              <span v-if="record.status === 1" class="geme_status_gray">待上线</span>
              <span v-else-if="record.status === 3" class="geme_status_color"
                >已上线</span
              >
              <span v-else-if="record.status === 4" class="geme_status_out">已下架</span>
              <span v-else-if="record.status === 2">-</span>
            </div>
            <div v-if="column.key === 'onlineTime'">
              <span v-if="record.onlineTime">{{ record.onlineTime }}</span>
              <span v-else>-</span>
            </div>
            <template v-if="column.key === 'tags'">
              <a-tag v-if="record.status === 1" :bordered="false" color="default"
                >未发布</a-tag
              >
              <a-tag v-else-if="record.status === 3" :bordered="false" color="green"
                >审核完成</a-tag
              >
              <a-tag v-else-if="record.status === 4" :bordered="false" color="error"
                >审核失败</a-tag
              >
              <a-tag v-else-if="record.status === 2" :bordered="false" color="warning"
                >审核中</a-tag
              >
            </template>
            <template v-else-if="column.key === 'action'">
              <span class="action">
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('views', record)"
                  >查看</a-button
                >
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('applyForRemoval', record)"
                  >申请下架</a-button
                >
              </span>
            </template>
          </template>
          <!-- <a-config-provider >
            <template #emptyText>
              <div style="text-align: center">
                <img src="../../assets/images/img-default @2x.png" alt="">
                <p>暂无数据</p>
              </div>
            </template>
          </a-config-provider> -->
        </a-table>
      </div>
    </a-card>
    <a-modal
      v-model:open="applyForRemovalModal"
      class="applyForRemovalModal"
      style="
        /* background: #FFFFFF; */
        padding: 0 25px;
        height: 635px;
        width: 1200px;
        box-shadow: 1px 3 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 2px 2px 2px 2px;
      "
      title="申请下架"
      @ok="handleOk"
    >
      <p>
        本开放平台支持开发者自行申请下架应用，如应用出现问题，可根据实际情况提交下架申请。
      </p>
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
        <a-form-item label="下架方式" name="way">
          <a-radio-group v-model:value="formState.way">
            <a-radio value="1">仅下架该版本</a-radio>
            <a-radio value="2">下架该游戏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="原因描述" name="cause">
          <a-textarea
            v-model:value="formState.cause"
            placeholder="请具体描述下架原因（如：①应用不再维护 ②应用更换包名 ③上架版本出现BUG，需暂时下架修复 ④上架版本出现BUG，需回退版本 ⑤其他原因）"
          />
        </a-form-item>
        <a-form-item label="上传截图(格式必须为JPG或PNG)">
          <a-upload
            v-model:fileList="formState.screenshot"
            list-type="picture-card"
            :max-count="1"
          >
            <div v-if="formState.screenshot.length < 1">
              <PlusOutlined
                :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
              />
            </div>
          </a-upload>
        </a-form-item>
        <div class="form_tips">
          <i class="tips">
            <!-- <img src="../../assets/icon/icon.png" alt="" class="imgs" /> -->
            温馨提示</i
          ><br />
          <i>① 提交成功后，游戏自动下架，无需审核等待。</i><br />
          <i
            >②
            若线上版本存在短期无法解决的严重BUG，但旧版本可正常使用，建议申请[仅下架该版本]，系统将自动回退到旧版本，确保新用户能下载到可用的版本。同时，建议开发者及时更新，保证老用户不再因为BUG影响正常使用。
          </i>
        </div>
      </a-form>
      <template #footer>
        <a-form-item style="text-align: center">
          <a-button
            htmlType="submit"
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px 2px 2px 2px;
            "
            type="primary"
            @click="handleOk"
            >提 交</a-button
          >
          <a-button
            class="button_cancel_hover"
            style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
            @click="handleCancel"
            >取 消</a-button
          >
        </a-form-item>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw, h } from "vue";
import LeTodoList from "./tolist.vue";
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  ExportOutlined,
  SyncOutlined,
} from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, Empty } from "ant-design-vue";
// import SvgIcon from "@/components/svgIcon.vue";
// const expand = ref(false);
// const localeObj =ref('')
// const localeObj= {
//   emptyText: h(Empty, {
//     description: '请您修改订阅信息，来精准匹配您的项目',
//     // image: Empty.PRESENTED_IMAGE_SIMPLE,
//     imageStyle: { height: '60px' },
//   }),
// }
const localeObj = {
  emptyText: h(Empty, {
    description: "暂无数据",
    image: "@/assets/images/img-default .png",
    imageStyle: { height: "60px" },
  }),
};
// todoList
const refreshData = () => {
  // 模拟数据刷新
  console.log("数据已刷新");
  // 这里可以添加实际的数据刷新逻辑
};
const receivedData = ref("");
const updateData = (data) => {
  console.log(11, "传参");
  console.log("data: ", data);
  receivedData.value = data;
  console.log("receivedData.value: ", receivedData.value);
};

const todoItems = ref([
  {
    title: "584",
    total: "总量: 1.89万",
    newUsers: "新增用户(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        // boundaryGap: false,
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Thu1",
          "Fri1",
          "Sat1",
          "Sun1",
          "Sun2",
        ],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 55, 400],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "151",
    total: "总量: 1.89万",
    newUsers: "新增次留(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "80128",
    total: "总量: 13.89万",
    newUsers: "活跃量(人)",
    dailyIncrease: "30%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 120],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
  {
    title: "68128",
    total: "总量: 11.89万",
    newUsers: "下载量(次)",
    dailyIncrease: "50%",
    option: {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        show: false,
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        show: false,
        axisLabel: {
          formatter: "{value} 次",
        },
      },
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 55],
          itemStyle: {
            color: "rgba(191, 234, 207, 1)",
          },
          type: "line",
          symbol: "none",
          areaStyle: {
            normal: {
              color: {
                type: "linear", //设置线性渐变
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(191, 234, 207, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(191, 234, 207, 1)", // 0% 处的颜色rgba(191, 234, 207, 1)
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
        },
      ],
    },
  },
]);
// search
const id = ref("");
const name = ref("");
const dataTime = ref([]);
// const selectTable = ref([
//   {
//     value: "jack",
//     label: "Jack",
//   },
//   {
//     value: "lucy",
//     label: "Lucy",
//   },
//   {
//     value: "disabled",
//     label: "Disabled",
//     disabled: true,
//   },
//   {
//     value: "yiminghe",
//     label: "Yiminghe",
//   },
// ]);
const search = () => {
  console.log(id.value, name.value, dataTime.value, 11111);
};
const reset = () => {
  (id.value = ""), (name.value = ""), (dataTime.value = []);
};
// const handleChange = (value) => {
//   console.log(`selected ${value}`);
//   search();
// };
// 表格
// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//     status:1
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//     status:2,
//     onlineTime:'2023/07/10 08:00:00'
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:3
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
// ];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
  });
}
const columns = ref([
  {
    title: "序号",
    dataIndex: "key",
    render: (value, record, index) => {
      return index + 1; // 使用行号
    },
    width: 80,
  },
  {
    dataIndex: "name",
    key: "name",
    resizable: true,
    width: 150,
    align: "center",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    align: "center",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    align: "center",
  },
  {
    title: "上线时间",
    key: "onlineTime",
    dataIndex: "onlineTime",
    align: "center",
    width: 180,
  },
  {
    title: "游戏状态",
    key: "status",
    dataIndex: "status",
    align: "center",
    width: 100,
  },
  {
    title: "Action",
    key: "action",
    align: "center",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
// const state = reactive({
//   // selectedRowKeys: [],
//   // Check here to configure the default column
//   loading: false,
// });
const applyForRemovalModal = ref(false);
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState, toRaw(formState));
      applyForRemovalModal.value = false;
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch((error) => {
      console.log("error", error);
    });
  console.log(111, "addM");
};
const handleCancel = () => {
  applyForRemovalModal.value = false;
  formRef.value.resetFields();
};
const doAction = (e, record) => {
  if (e === "applyForRemoval") {
    console.log(1111, "applyForRemoval");
    applyForRemovalModal.value = true;
    // formRef.value.resetFields();
    // formState.screenshot =[]
  } else if (e === "delete") {
    Modal.confirm({
      title: "Are you sure delete this task?",
      icon: createVNode(ExclamationCircleOutlined),
      content: `Some descriptions + ${record.name}`,
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      onOk() {
        console.log("OK", record);
        formRef.value
          .validate()
          .then(() => {
            console.log("values", formState, toRaw(formState));
            applyForRemovalModal.value = false;
          })
          .catch((error) => {
            console.log("error", error);
          });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  } else if (e === "views") {
    console.log(record, "record");
  }
};
// modal 下架
const formRef = ref();
const formState = reactive({
  way: "",
  cause: "",
  screenshot: [],
});
const rules = {
  way: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  cause: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
};

// 分页
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
<style scoped>
.title {
  text-align: center;
}
.margin20 {
  margin-top: 20px;
}
.dataOverview {
  height: 15px;
  font-family: PingFang SC, PingFang SC;
  /* font-weight: bolder; */
  font-size: 10px;
  /* color: #3c3c3c; */
  line-height: 15px;
  margin-left: 20px;
}
.a_col_date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 550;
}
</style>
